<template>
  <div 
    :class="['modular-component', visible ? 'show' : '']" 
    :visible.sync="visibleModular">
    <div class="modular-container flex col">
      <div class="nav">
        <a-button icon="left" @click="$_handleCancel"></a-button>
        <div class="left20" >{{title}}</div>
      </div>
      <a-divider />

      <div class="modular-content">
        <slot></slot>
      </div>

      <a-divider />
      <div class="footer">
        <a-button type="primary" @click="$_handleConfirm">提交</a-button>
        <a-button @click="$_handleCancel">取消</a-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ModularComponent',
    data() {
      return {
        scroll_options: {
          vuescroll: {},
          scrollPanel: {},
          rail: {
            keepShow: true
          },
          bar: {
            hoverStyle: true,
            onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
            background: "#333",         //滚动条颜色
            opacity: 0.2,               
            "overflow-x": "hidden"
          }
        },
      }
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      }
    },
    computed: {
      visibleModular: {
        get() {
          return this.visible
        },
        set() {
          this.$emit('update:visible')
        }
      }
    },
    methods: {
      $_handleCancel() {
        this.$emit('cancel');
      },
      $_handleConfirm() {
        this.$emit('confirm');
      }
    }
  }
</script>

<style lang="less" scoped>
  .modular-component{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: calc(100vh - 60px) !important;
    height: auto;
    z-index: 2000;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    background: #fff;
  }

  .modular-component.show{
    visibility: visible;
    overflow: visible;
  }

  .modular-container{
    position: relative;
    border-radius: 3px;
    margin: 0 auto;
    width: 100%;
    border-radius: 0;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s;
    background: #fff;
    box-sizing: border-box;
    padding: 25px;
    overflow: hidden;
  }

  .show .modular-container{
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  .modular-content{
    position: relative;
  }

  .nav{
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #fff;
  }

  .footer{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    background: #fff;
    button{
      margin-left: 10px;
    }
  }
  .left20 {
    margin-left: 20px;
  }
</style>